<!--
 * @Author: your name
 * @Date: 2020-10-13 10:23:54
 * @LastEditTime: 2020-12-22 14:44:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \inventory-apie:\hjimi\脸库\html\face-recognition\src\views\faceManagement\index.vue
-->
<style lang="less" scoped>
.sc {
    span,a {
        color: #409eff;
        display: inline-block;;
        margin-left: 15px;
        margin-right: 15px;
        cursor: pointer;
    }
    a:hover {
        text-decoration: underline;
    }
}
.faceUplolad {
    .tip {
        line-height: 20px;
        color: #909399;
    }
}
.faceBox .face {
width: 160px;
    height: 165px;
    border:1px #d7dae2 solid;
    position: relative;
     overflow: hidden;
    border-radius: 4px;
    .el-icon-plus {
    font-size: 40px;
    position: absolute;
    top:50%;
    left:50%;
    color: #DCDFE6;
    transform: translate(-50%,-50%);
    cursor: pointer;
   
}

}
.face_list {
  margin-top: 20px;
  /deep/.el-upload-dragger {
    border-left:none;
    border-top: none;
    width:148px;
    height: 148px;
    .el-icon-upload {
      font-size: 25px;
      display: block;
    }
    .el-icon-upload + i {
      position: absolute;
    top: 20px;
    width: 100%;
    text-align: center;
    display: block;
    font-size: 14px;
    }
  }
}
// .faceList {
//   display: flex;
//   justify-content: space-between;
//   flex-wrap: wrap;
//   margin-top: 25px;
//     li {
//         width: 160px;
//         margin-bottom: 25px;
//     }
//     .nameTip {
//         color: #f56c6c;
//         font-size: 12px;
//         padding-top: 5px;
//     }
// }
// .caozuo {
//     margin-top: 5px;
//     span {text-align: center;border:1px transparent solid;}
//     span,input {
//      display: inline-block;
//      height: 25px;
//       width: 85px; 
//       line-height: 20px;;
//     }
//     input {
//     background-color: #FFF;
//     background-image: none;
//     border-radius: 4px;padding:0 5px; 
//     border: 1px solid #DCDFE6;
//     -webkit-box-sizing: border-box;
//     box-sizing: border-box;    
//     }
//     i {
//         font-size: 18px;
//         color: #409eff;
//         cursor: pointer;
//         display: inline-block;
//         margin-left: 16px;
//         vertical-align: middle;
//     }
// }
.el-icon-delete {
  font-size: 14px;
}
/deep/.el-loading-spinner i {
    font-size: 22px;
}
.dialog-footer {text-align: right;}
.icon-empty {
  font-size: 14px;
}
.maxSign {
  .faceMax {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: #67C23A;
    border:1px #eee solid
  }
  margin-bottom:20px;
}
/deep/.faceMax_row {
  background: #ecf5ff;
}
 
</style>
<template>
  <div v-loading="deleteLoding" :element-loading-text="delLoadingTip"  element-loading-spinner="el-icon-loading">
    <!-- <el-page-header title="人脸查询" @back="goBack"></el-page-header> -->
      <el-form :model="pagingParams" :inline="true" class="faceLibraryList">
        <el-form-item label="脸库名称"><el-input v-model.trim="pagingParams.displayName" placeholder="脸库名称" disabled></el-input></el-form-item>
        <el-button type="primary" @click="onSearch" class="search" disabled><i class="el-icon-search"></i> <span>查询</span></el-button>
         <el-button type="primary" @click="onDelete(false, '清空')"><i class="iconfont icon-empty"></i> <span>&nbsp;批量清空</span> </el-button>
        <el-button type="primary" @click="onDelete(true, '删除')"><i class="el-icon-delete"></i><span> 批量删除</span> </el-button>
        <el-button type="primary" @click="newFaceLibrayHandle"> <i class="el-icon-circle-plus-outline"></i> <span>新建脸库</span></el-button>
      </el-form>
      <div class="maxSign" v-if="maxSign">
       <el-tag>脸库容量最大：{{ faceMax }}</el-tag>
      </div>
      <el-table
      class="library_table" :data="tableData" border @selection-change="handleSelectionChange" v-loading="table_loading" ref="multipleTable" :row-class-name="tableRowClassName1" :summary-method="getSummaries" show-summary max-height="650">
        <template slot="empty"><i class="iconfont icon-kong"></i>暂无数据</template>
        <el-table-column width="50" type="selection" fixed align="center"></el-table-column>
        <!-- <el-table-column label="序列" width="60" align="center"><template v-slot="scope">{{ scope.$index + pagingParams.size * (pagingParams.current - 1) }}</template></el-table-column> -->
        <el-table-column label="脸库ID" width="70" prop="dbId" align="center"><template v-slot="scope"><div>{{ scope.row.id }}</div></template></el-table-column>
        <el-table-column label="脸库名称" width="150" prop="displayName" align="center"><template v-slot="scope"><div>{{ scope.row.displayName }}</div></template></el-table-column>
        <el-table-column label="脸库编码" width="180" prop="code" align="center"><template v-slot="scope"><div>{{ scope.row.code }}</div></template></el-table-column>
        <el-table-column label="脸库容量" width="110" prop="maxSize" align="center"><template v-slot="scope"><div>{{ scope.row.maxSize }}</div></template></el-table-column>
        <el-table-column label="库存图片数量" width="110" prop="currentSize" align="center"><template v-slot="scope"><div>{{ scope.row.currentSize }}</div></template></el-table-column>
        <el-table-column label="建库时间" width="170" prop="createTime" align="center"></el-table-column>
        <el-table-column label="图片入库时间" width="170" prop="lastUpdateTime" align="center"></el-table-column>
         <el-table-column label="人脸上传" width="200" align="center">
             <template v-slot="scope"><div class="sc"><span @click="faceUploladShow(scope.$index,scope.row)">上传</span>
              <!-- displayName=${scope.row.displayName} -->
             <router-link :to="`/faceLibraryList?show=1&libraryCode=${scope.row.code}`">查询人脸</router-link>
                                </div></template >
        </el-table-column>
        <el-table-column label="备注" width="315" prop="description" align="center" ></el-table-column>
        <el-table-column label="操作" width="280" fixed="right">
          <template v-slot="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" disabled>修改</el-button>
            <el-popconfirm v-show="scope.row.currentSize === 0 ? false : true" confirmButtonText="确认" cancelButtonText="取消" icon-color="red" title="确定要永久清空该脸库吗？" @onConfirm="handleDelete(scope.$index, scope.row, false, '清空')"  style="margin-left: 5px">
             <el-button size="mini" type="danger" slot="reference">清空</el-button>
            </el-popconfirm>
            <el-popconfirm confirmButtonText="确认" cancelButtonText="取消" icon-color="red" title="确定要永久删除该脸库吗？" @onConfirm="handleDelete(scope.$index, scope.row, true, '删除')"  style="margin-left: 5px">
              <el-button size="mini" slot="reference"><i class="el-icon-delete"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagingParams['current']"
        :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
        :page-size="pagingParams['size']"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagingParams['total']"
      ></el-pagination> -->

<!-- 新建脸库 -->
  <el-dialog title="新建脸库" :visible.sync="faceFormVisible" width="517px">
     <div v-loading="addSave_loading"  element-loading-text="拼命保存中"  element-loading-spinner="el-icon-loading">
        <el-form :model="addFaceLibraryForm" label-width="auto" :rules="libraryRule" ref="addLibraryRule" class="addFaceLibraryForm">
      <el-form-item label="用户名"><el-input v-model="username" disabled style="width: 320px"></el-input></el-form-item>
      <el-form-item label="脸库名称" prop="displayName" :rules="{ required: true, message: '脸库名称不能为空'}">
        <el-input v-model.trim="addFaceLibraryForm.displayName" placeholder="脸库名称" maxlength="30" style="width: 320px"></el-input>
      </el-form-item>
       <el-form-item label="脸库编码" prop="code" maxlength="30">
        <el-input v-model.trim="addFaceLibraryForm.code" placeholder="脸库编码" style="width: 320px" maxlength="100"></el-input>
      </el-form-item>
     <el-form-item label="脸库容量" prop="maxSize">
     <el-input v-model.number="addFaceLibraryForm.maxSize" placeholder="脸库容量" style="width: 320px" maxlength="9"></el-input>
     </el-form-item>
     <el-form-item label="备注" prop="description"><el-input type="textarea" maxlength="400" v-model="addFaceLibraryForm.description" placeholder="备注" style="width: 320px"></el-input></el-form-item>
     </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetFaceLibraryForm('addLibraryRule')">重 置</el-button>
      <el-button @click="faceFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addFaceLibraryHandler('addLibraryRule')" :disabled="addSave_loading"><i :class="{'el-icon-loading':addSave_loading}"></i> &nbsp;保 存</el-button>
    </div>
     </div>
  </el-dialog> 

  <!-- 修改脸库 -->
    <!-- <el-dialog title="新建脸库" :visible.sync="editFormVisible" width="517px">
      <el-form :model="editFaceLibraryForm" label-width="auto" ref="editLibraryRule" class="addFaceLibraryForm">
      <el-form-item label="用户名"><el-input v-model="editFaceLibraryForm.username" disabled style="width: 320px"></el-input></el-form-item>
      <el-form-item label="脸库名称" prop="displayName" :rules="{ required: true, message: '脸库名称不能为空'}">
        <el-input v-model.trim="editFaceLibraryForm.displayName" placeholder="脸库名称" maxlength="30" style="width: 320px"></el-input>
      </el-form-item>
      <el-form-item label="脸库编码" prop="code" maxlength="30" :rules="{ required: true, message: '脸库编码不能为空'}">
        <el-input v-model.trim="editFaceLibraryForm.code" placeholder="脸库编码" style="width: 320px" maxlength="100"></el-input>
      </el-form-item>
     <el-form-item label="脸库容量" prop="size">
       <el-input v-model.number="editFaceLibraryForm.maxSize" placeholder="脸库容量" style="width: 320px" maxlength="9"></el-input>
     </el-form-item>
     <el-form-item label="备注" prop="description"><el-input type="textarea" v-model="editFaceLibraryForm.description" placeholder="备注" style="width: 320px"></el-input></el-form-item>
     </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="editFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="editFaceLibraryHandler('editLibraryRule')" :disabled="editSave_loading"><i :class="{'el-icon-loading':editSave_loading}"></i> &nbsp;保 存</el-button>
    </div>
  </el-dialog> -->
  <form id="pos">
 <!-- 人脸上传 -->
  <el-dialog title="人脸上传" :visible.sync="faceUploladVisible" width="1150px" class="faceUplolad">
    <!-- apis/algo/library/import/face -->
      <p class="tip">上传图片（jpg/png/jpeg/bmp）小于3M，请上传无遮挡单人正面照，单次最多可上传50张</p>
      <!-- ，且图片命名须为姓名+图片格式（张三.jpg） -->
    
      <el-upload
      class="face_list"
      ref="upload"
      action="apis/algo/library/import/face"  
      :data="imgParams"
      :limit="50"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-change="imgChangeHandle"
      :on-success="fileSuccess"
      :before-upload="imgBeforeHandle"
      :on-exceed="imgExceedHandle"
      :on-error="imgError"
      :show-file-list="true"
      :multiple="true"
      :auto-upload="true"
      :http-request="httpRequest"
      drag
      >
      <!-- :http-request="httpRequest" -->
 <span><i class="el-icon-upload"></i><i slot="tip">拖拽至此或点击上传</i></span>
 </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetFaceList">清 空</el-button>
      <el-button @click="faceUploadOut">取 消</el-button>
      <!-- <el-button @click.prevent="submitImg"></el-button> -->
      <!-- <el-button type="primary">上 传</el-button> -->
    </div>
</el-dialog> </form>
<el-dialog :visible.sync="fdImageVisible">
  <img width="100%" :src="dialogImageUrl">
</el-dialog>
  </div> 
</template>
<script>
import {
  library,       //新建脸库
  queryLibrary,  //脸库查询
  deleteLibrary, //删除脸库
  queryMaxCount, //查询最大的图片数量
  faceUpload    //人脸上传
   } from "@/api/faceManagement"
import cookies from "js-cookie"
import { stringify } from 'querystring'
import { getUser } from '@/utils/auth'
export default {
  name: "faceLibraryList",
  data() {
   let validateCode = (rule, value, callback) => {
      value === ""
        ? callback(new Error("请输入脸库编码"))
        : !/(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{1,64}/g.test(value)
        ? callback(new Error("格式为字母数字或下划线组成"))
        : callback()
      callback()
    }
   let maxSize = (rule, value, callback) => {
      value === ""
        ? callback(new Error("请输入库存容量"))
        : value > 100000000
        ? callback(new Error("库存数量不能超过1亿"))
        : callback()
      callback()
    }
    return {
      deleteLoding: false,
      table_loading: false,
      faceFormVisible: false,
      editFormVisible: false,
      faceUploladVisible: false,
      amendLibraryVisible: false,
      delLoadingTip: '拼命删除中...',
      faceMax: '',
      maxSign: false,

// 保存按钮动画
      addSave_loading: false,
      editSave_loading: false,
      tableData: [],
      multipleSelection: [], //多选删除
      libraryRule: {
         code: [{required: true, validator: validateCode, trigger: "blur" }],
         maxSize: [
            { required: true, validator: maxSize, trigger: "blur" },
            { type: 'number', message: '库存数量必须为数字值'}],
      },
      username: getUser().username,
// 新增脸库
      addFaceLibraryForm: {
        // "id": "",
        "displayName":  "",
        "code": "",
        "maxSize": "",
        "description": "",
        // "createTime":  "",
        // "lastUpdateTime":  "",
      },

// 修改脸库
       editFaceLibraryForm: {
        id:'',
        username: getUser().username,
        displayName: '',
        code:'',
        maxSize:'',
        description:'',
        createTime: '',
        lastUpdateTime: '',
      },
      
//  图片上传参数
    imgParams: {},
     dialogImageUrl: '',
     fdImageVisible: false,
     
// 分页
      pagingParams: {
        id:'',
        // username: getUser().username,
        displayName: '',
        code:'',
        maxSize:'',
        description:'',
        createTime: '',
        lastUpdateTime: '',
        // current: 1,
        // size: 20,
        // total: 0,
      },
    }
  },
  watch: {
    faceUploladVisible: {
      handler(val){
        !val ? (this.resetFaceList()) : String
      }
    }
  },
  methods: {
// ----------------------------查询--------------------------------
    onSearch() {
          this.pagingParams.current = 1
          this.getsLibrary()
        },
// ---------------------------获取脸库列表--------------------------
    getsLibrary() {
      let params = this.pagingParams
      this.table_loading = true
      queryLibrary(this.pagingParams).then((res) => {
        // params.size = res.data.size
        // params.current = res.data.current
        // params.total = res.data.total
        this.tableData = res.data
        this.tableData.reverse()
        // 获取脸库人脸数量
         this.tableData.map((x) => {
          x.lastUpdateTime = x.lastUpdateTime.replace('T', ' ')
          x.createTime = x.createTime.replace('T', ' ')
        })
        this.table_loading = false
      })
        },
// ---------------------------新建脸库-------------------------------
    newFaceLibrayHandle() {
      this.faceFormVisible = true
    },
// ---------------------------修改脸库-------------------------------
    handleEdit(index, row) {
      this.editFormVisible = true
      let _v = this.editFaceLibraryForm
          _v.displayName = row.displayName
          _v.maxSize = row.maxSize
          _v.description = row.description
          _v.code = row.code
    },
    
// 新建/提交-脸库
    faceHandle(el, elHide, param, saveLoading) {
    let _this = this 
       this.$refs[el].validate((valid) => {
          if (valid) {
           submitHandler()
          }})
      function submitHandler() {
        _this['addSave_loading'] = true
        library(param).then((res) => {
          if (res.code === 0) {
             _this['addSave_loading'] = false
                _this.$message({
               message: "保存成功",
               type: "success"
               })
            _this.$refs[el].resetFields()
            _this[elHide] = false
            _this.onSearch()
            _this.queryMaxCount()
          } else {
             _this['addSave_loading'] = false
          }
        })
      }
    },
// ---------------------------新建-提交脸库------------------------------
    addFaceLibraryHandler(addLibraryRule) {
      // delete  this.addFaceLibraryForm.username
        this.faceHandle(addLibraryRule, 'faceFormVisible', this.addFaceLibraryForm, 'addSave_loading')
       
        },
// ---------------------------修改-提交脸库-------------------------------
    editFaceLibraryHandler(editLibraryRule) {
       this.faceHandle(editLibraryRule, 'editFormVisible')
        },
        
//重置脸库npt
    resetFaceLibraryForm(e) {
          this.$refs[e].resetFields()
        },
// ------------------------------删除/清空单个脸库-------------------------
 handleDelete(x, y, isTrue, tip) {
  let _this = this
      isTrue ? deletes(isTrue) : deletes(isTrue)
   function deletes (t) {
      _this.deleteLoding = true
     _this.delLoadingTip = `拼命${ tip }中...`
         deleteLibrary(
          { 
          //  code: y.code,
           flagDrop: t
          },
           y.code
        ).then((res) => {
        if (res.code == 0) {
          _this.$message({
            message: res.msg,
            type: "success"
          })
          _this.getsLibrary()
          _this.queryMaxCount()
           _this.deleteLoding = false
        } else {
           _this.deleteLoding = false
        }
      })
      }
        },
        
// 最大脸库容量
    async queryMaxCount() {
       await queryMaxCount().then((res) => {
          this.maxSign = true
         if(res.code === 0) {
           if(res.data === null) {
              this.maxSign = false
            } else {
             let data =  res.data
            if(data.currentSize != 0) {
              this.faceMax = data.displayName + ' / ' + data.currentSize
            } else {
              this.maxSign = false
            }}
            }
    })
        },

 // 高亮当前用户所在行
        tableRowClassName1({ row, rowIndex }) {
             if(this.faceMax != '') {
               return row.currentSize == this.faceMax.substr(this.faceMax.indexOf('/') + 2) ? "faceMax_row" : String
             }else {
                this.maxSign = false
               return
             }
        },
// ---------------------------------批量删除/清空脸库-----------------------
    onDelete(istrue, tip) {
      if (this.multipleSelection.length !== 0) {
        this.$confirm(`此操作将永久${ tip }已选脸库, 是否继续?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
         this.deleteLoding = true
         this.delLoadingTip = `批量${ tip }中...`
            for (let i = 0; i < this.multipleSelection.length; i++) {
              deleteLibrary(
                {
                flagDrop: istrue
               },  
              this.multipleSelection[i].code).then((res) => {
                if (res.code === 0) {
                  this.deleteLoding = false
                  this.getsLibrary()
                  this.queryMaxCount()
                   this.$message({
                    type: "success",
                    message: "操作成功!",
                  })
                } else {
                  this.deleteLoding = false
               }  
              })
            }
          }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            })
            this.$refs.multipleTable.clearSelection()
          })
      } else {
        this.$message({
          message: `请勾选要${ tip }的脸库`,
          type: "warning"
        })
      }
        },
// --------------------------------人脸图上传-----------------------------
    faceUploladShow(x,y) {
    this.faceUploladVisible = true
    this.imgParams.code = y.code
    },
    
//  截取图片名
    cutImageName(filename) {
      let fileReg = /\.{1}[a-z]{1,}$/
        if (fileReg.exec(filename) !== null) {
            return (filename.slice(0, fileReg.exec(filename).index))
        } else {
            return filename
        }
    },
    
// 清空已传图片
    resetFaceList() {
     this.$refs.upload.clearFiles()
        },
      faceUploadOut() {
      this.faceUploladVisible = false
      this.resetFaceList()
      },

// 上传成功
    fileSuccess() {
      let face_el = document.getElementsByClassName('face_list')[0].getElementsByTagName('ul')[0];
      new Promise((resolve) => {
          face_el ? resolve() : String
      }).then(() => {
        Array.prototype.forEach.call(face_el.getElementsByTagName('li'), function (el, index) {
          let img_el = el.getElementsByTagName('img')[0]
          if (img_el) {
               el.style = 'background:url(' +  img_el.getAttribute('src') + ') top center no-repeat;background-size: contain'
               el.classList.add('sign')
               el.removeChild(el.childNodes[0]) 
          }
         })
      })
    },

// 修改图片时
    imgChangeHandle(file,fileList) {
    
    },

// 上传图片前
    imgBeforeHandle(file, fileList) {
      
      this.imgParams.files = file
      let _this = this,
          params = _this.imgParams,
          readers = new FileReader(),
          fileName = this.cutImageName(file.name)
          this.imgParams.name = fileName
        function imageType () { return file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/bmp' }
        const isLt1M = file.size / 1024 / 1024 < 3;
              if (!imageType()) { 
                this.$message.error('上传人脸图片只能是四种格式（jpg/jpeg/png/bmp）!')
                } 
              //   else if(fileName != fileName.replace(/[^\u4E00-\u9FA5]/g,'') || fileName.length <= 1) {
              //      this.$message.error('图片命名格式必须为中文姓名!');
              //    return false
              // } 
              else if (!isLt1M) {
                 this.$message.error('上传人脸图片大小不能超过3MB!')
              } else { 
                  let format = file.type.substr(file.type.indexOf('/') + 1)
                   params['imageDescs[0].format'] = format.toUpperCase()
                    if(params['imageDescs[0].format'] === 'JPEG') {
                      params['imageDescs[0].format'] = 'JPG'
                      }
                         new Promise((reslove) => {
                           readers ? reslove() : String
                         }).then(() => {
                            readers.readAsDataURL(file)
                            readers.onload = function (e) {
                            let url = e.target.result,
                                img = new Image()
                                img.src = url
                            img.onload = function () { 
                                params.width = img.width
                                params.height = img.height
                                
                            }
                        }
                         })
              }
            return imageType() && isLt1M;
    },
     async httpRequest(content){
         let _this = this,
             formData = new FormData(document.getElementById('pos')) 
          formData.delete('file')
          formData.append('files', content.file) 
          formData.append('code', this.imgParams.code)
          let param = {
            "code": this.imgParams.code,
            "imageDescs": [{"format": this.imgParams['imageDescs[0].format']}],
          }
          formData.append("param", new Blob([JSON.stringify(param)], { type:"application/json" }))
           setTimeout(() => {
              formData.append('imageDescs.width', this.imgParams['width'])
              formData.append('imageDescs.height', this.imgParams['height'])
              faceUpload(formData).then((res) => {
                if(res.code === 0 && res.data[0].isSuccess) {
                      this.$message({
                             message: content.file.name + ' 入库成功',
                              type: "success"
                        });
                        this.getsLibrary()
                        this.queryMaxCount()
                     } else if(res.code === 0 && !res.data[0].isSuccess) {
                       
// 提示图片入库失败原因  
                       switch(res.data[0].errorCode) {
                         case 11001 : errTxtTip('模糊');break;
                         case 11002 : errTxtTip('强光照');break;
                         case 11003 : errTxtTip('弱光照');break;
                         case 11004 : errTxtTip('口罩遮挡');break;
                         case 11005 : errTxtTip('墨镜遮挡');break;
                         case 11006 : errTxtTip('手遮挡');break;
                         case 11007 : errTxtTip('其他遮挡');break;
                         case 11008 : errTxtTip('张口');break;
                         case 11009 : errTxtTip('闭眼');break;
                         case 11010 : errTxtTip('多人脸');break;
                         case 11011 : errTxtTip('无人脸');break;
                         case 11013 : errTxtTip('人脸过小');break;
                         case 10212 : errTxtTip('多人脸');break;
                         default : this.$message.warning(content.file.name + ' 入库失败！请另选上传');this.resetFaceList()
                       }
                      function errTxtTip(txt) {
                         _this.$message.warning(content.file.name + ` 系统检测为: ${txt}！入库失败！`, 5500)
                          _this.resetFaceList()
                      }
                     } else {
                       this.resetFaceList()
                     }
                })
           }, 100)
            },
    async submitImg() {
      this.$refs.upload.submit()
    },
 
// 上传上限
       imgExceedHandle(files, fileList) {
        this.$message({
                      message: files.length > 50 ? '单次最多可上传50张': '上传总数不能超过50张，请先清空',
                       type: "warning"
                  })
       },
       
// 上传失败
       imgError(err, file, fileList) {
             this.$message({
                      message: '上传失败，请重试',
                       type: "error"
                  })
       },
       handlePictureCardPreview(file) {
               this.dialogImageUrl = file.url
               this.fdImageVisible = true
             },

// 合计库存图片数量
     getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return
          }
          if(index !== 5 && index !== 4) {
            sums[index] = ''
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
             if(index === 5) {
             sums[index] += ' 张'
           }
            // sums[index] += '';
          } else {
            // sums[index] = 'N/A';
          }
        })
        return sums
      },
      
// 分页
       handleSizeChange(val) {
         this.pagingParams.size = val
         this.getsLibrary()
       },
       handleCurrentChange(val) {
         this.pagingParams.current = val
         this.getsLibrary()
       },
       handleSelectionChange(val) {
         this.multipleSelection = val
  }
  },
      created() {
          this.faceFormVisible = this.$route.params.createShow ? true : false
          this.getsLibrary()
          this.queryMaxCount()
        },
      beforeUpdated() {
        this.queryMaxCount()
      },
      destroyed() {
        this.queryMaxCount()
  }
}
</script>